<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:38:01
 * @LastEditTime: 2021-06-21 17:39:10
 * @LastEditors: coocase
 * @Description: 确认支付
 * @FilePath: \git\dami\src\pages\pay\confirmInfo.vue
-->
<template>
    <div class="confirm-wrap">
        <Steps :current="1">
            <Step title="选择商品"></Step>
            <Step title="确认订单信息"></Step>
            <Step title="支付订单"></Step>
            <Step title="收取商品"></Step>
        </Steps>
        <div class="delivery-way">
            <div class="delivery-title">配送方式</div>
            <div class="way-list">
                <div class="list-el">
                    <svg class="icon icon-qr" aria-hidden="true">
                        <use xlink:href="#icon-qr1154761easyiconnet"></use>
                    </svg>
                    <span>电子票</span>
                </div>
            </div>
            <div class="delivery-tip">
                <Icon
                    type="ios-alert"
                    color="#FF1268"
                />支付成功后，打开APP出示票夹中的二维码直接入场，无需取票
            </div>
            <div class="delivery-form">
                <Form ref="form" :model="form" :rules="rule" class="form">
                    <FormItem class="input-wrap" prop="user" label="联系人">
                        <Input
                            class="input"
                            type="text"
                            v-model="form.user"
                            placeholder="Username"
                        >
                        </Input>
                    </FormItem>
                    <FormItem class="input-wrap" prop="phone" label="手机号">
                        <Input
                            class="input"
                            type="text"
                            v-model="form.phone"
                            placeholder="phone"
                        >
                        </Input>
                    </FormItem>
                    <!-- <FormItem>
                    <Button type="primary" @click="handleSubmit('form')">Signin</Button>
                </FormItem> -->
                </Form>
            </div>
        </div>
        <div class="pay-type-wrapper">
            <div class="pay-type-title">支付方式</div>
            <div class="pay-type-list-wrap">
                <img src="../../assets/alipay.png" alt="" />
            </div>
        </div>
        <div class="order-item">
            <div class="item-title">确认订单信息</div>
            <div class="order-item-list">
                <div class="list-table">
                    <div class="table-header">
                        <Row>
                            <Col span="11" class="table-col">
                                <div class="table-title">项目信息</div>
                                <div class="table-body1">
                                    <div class="project-wrap">
                                        <div class="project-img"></div>
                                        <div class="projec-info">
                                            <span class="project-info-title"
                                                >{{buydatas.itemName}}
                                            </span>
                                            <span class="project-info-date"
                                                v-if="buydatas.startTime">{{buydatas.startTime[0].time}} 单次通票</span
                                            >
                                            <span class="project-info-adrress">{{buydatas.adress}}</span>
                                        </div>
                                    </div>
                                </div>
                            </Col>
                            <Col span="2" class="table-col">
                                <div class="table-title">座位信息</div>
                                <div class="table-body">
                                    <div class="seat-info" v-for="seat in selected" v-if="selected.length">
                                        <span>{{seat[0]+1}}</span>排
                                        <span>{{seat[1]+1}}</span>座
                                    </div>
                                </div>
                            </Col>
                            <Col span="2" class="table-col">
                                <div class="table-title">单价</div>
                                <div class="table-body">
                                    <div class="unit-price" v-for="seat in selected" v-if="selected.length">
                                        <span>￥{{price(seat[2])}}</span>
                                    </div>
                                </div>
                            </Col>
                            <Col span="2" class="table-col">
                                <div class="table-title" >数量</div>
                                <div class="table-body">
                                    <div class="count" v-for="seat in selected" v-if="selected.length">&times1</div>
                                </div></Col
                            >
                            <Col span="3" class="table-col">
                                <div class="table-title">优惠</div>
                                <div class="table-body"></div
                            ></Col>
                            <Col span="4" class="table-col">
                                <div class="table-title">小计</div>
                                <div class="table-body">
                                    <div class="price-total">￥{{totalPrice()}}</div>
                                </div></Col
                            >
                        </Row>
                    </div>
                </div>
            </div>
            <div class="order-item-tips">
                <Row>
                    <Col span="12">
                    <span class="tips-title">开具发票:</span>
                     <span class="tips-content">请在支付完成后，前往大麦APP开具发票</span>
                     </Col>
                    <Col span="12">
                    <span class="tips-title">配送方式:</span>
                    <span class="tips-content">电子票</span>
                    </Col>
                </Row>
               
                
            </div>
        </div>
        <div class="term">
            <span>
                <Checkbox v-model="single"></Checkbox>
                我已经阅读并同意<a>《订票服务条款》</a></span>
            <span>同意"票品为不记名凭证，请您妥善保管，遗失不补"</span>
        </div>
        <div class="order-pay">
            实付款: <span class="pay-icon">￥</span><span class="pay-money">{{totalPrice()}}</span>
        </div>
        <div class="submit">
            <Button type="primary"  :disabled="!single" @click="handleSubmit('form')">同意以上协议并提交订单</Button>
        </div>
    </div>
</template>

<script>
import bus from "../../common/eventBus";
export default {
    name: "confirm",
    
    data() {
        return {
            single: false,
            form: {
                user: "",
                phone: "",
            },
            rule: {
                user: [
                    { required: true, message: "请填写用户", trigger: "blur" },
                ],
                phone: [
                    {
                        required: true,
                        message: "请填写手机号.",
                        trigger: "blur",
                    },
                    {
                        type: "string",
                        len: 11,
                        message: "手机格式错误",
                        trigger: "blur",
                    },
                ],
            },
            buydatas:'',
            selected:'',
        };
    },
    created: function () {
        bus.$off("paydatas").$on("paydatas",  (paydatas,selected) =>{ 
              this.buydatas = paydatas;
              this.selected = selected;
        });
    },
    mounted(){
        if(!this.buydatas.itemName){
            console.log('buydatas');
            this.getDetail()
        }
    },
    beforeDestroy(){
        bus.$emit('paydatas',this.buydatas,this.selected,this.form)
    },
    computed:{
        getprice(){
            var arr =[];
            if(this.buydatas.itemPrice){//不做判断的话，数据不存在时则会报错 foreach 未定义
                this.buydatas.itemPrice.forEach(el => {
                    arr.push(el.price)
                });
            }
            for (let i = 0; i < arr.length-1; i++) {
                for (let j = 0; j < arr.length-1-i; j++) {
                    if(arr[j]>arr[j+1]){
                        let el = arr[j+1];
                        arr[j+1] = arr[j];
                        arr[j] = el;
                    }
                }
            }
            return arr
        }
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success("Success!");
                    this.$router.push({ name: 'qrPay' })
                        
                } else {
                    this.$Message.error("请填写收获人信息!");
                }
            });
        },
        //根据等级返回价格
        price: function (level) {
            var price = 0;
            switch (level) {
                case 3:
                    price = this.getprice[3];
                    break;
                case 4:
                    price = this.getprice[2];
                    break;
                case 5:
                    price = this.getprice[1];
                    break;
                default:
                    price = this.getprice[0];
                    break;
            }
            return price;
        },
        totalPrice(){
            var total = 0;
            for (let i = 0; i < this.selected.length; i++) {
                const element = this.selected[i];
                total = total + this.price(this.selected[i][2])
                
            }
            return total
        },
        getDetail:function () {  
        this.$http.getRequest({
          api:'detail',
          data:{}
        }).then((res) => {
          this.buydatas = res
          console.log(res);
        }).catch((err) => {
          console.log(err);
        });
      },
    },
};
</script>

<style scoped>

.confirm-wrap {
    width: 1200px;
    margin: 20px auto;
}
.delivery-way,
.pay-type-wrapper {
    margin: 30px 0;
}
.delivery-title,
.pay-type-title,
.item-title {
    font-size: 20px;
}
.way-list {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
}
.list-el {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.icon-qr {
    background-color: #ff1268;
    font-size: 100px;
    color: #eee;
    border-radius: 50%;
    margin-bottom: 10px;
}
.delivery-tip {
    margin-top: 50px;
}
.form {
    margin-top: 30px;
}
.input-wrap {
    margin-bottom: 10px;
}
.input {
    width: 200px;
}
.pay-type-list-wrap {
    display: flex;
    justify-content: center;
    padding: 20px 30px;
    margin-top: 30px;
    border: 2px solid #ff1268;
    width: 245px;
}
.order-item-list{
    margin: 30px;
}
.table-col {
    text-align: center;
    font-size: 12px;
}
.table-body{
    /* height: 80px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}
/* .table-body1{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
} */
.project-wrap{
    margin: 20px 20px;
    display: flex;
    justify-content: flex-start;
    align-items:flex-start;
}
.project-img{
    width: 62px;
    height: 80px;
    background-color: brown;
}
.projec-info{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 20px;
}
.project-info-title{
    color: #4a4a4a;
}
.project-info-date{
    color: #9b9b9b;
}
.project-info-adrress{
    color: #9b9b9b;
}
.price-total{
    font-weight: bold;
    font-size: 16px;
}
.order-item-tips{
    color: #826666;
    font-size: 12px;
    line-height: 16px;
    /* padding:16px; */
    padding-left: 16px;
    margin-left:30px ;
}
.term{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    font-size: 12px;
    color: #826666;
}
.term span{
    display: inline-block;
}
.order-pay{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 30px;
}
.submit{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 30px;
}
.icon-check{
    color: red;
    font-weight: bold;
    font-size: 16px;
}
.pay-icon{
    font-size: 30px;
    color: #999;
}
.pay-money{
    font-size: 30px;
    color: #ff1268;
}

</style>
